<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>个人网站</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/global.css" type="text/css">
	<link rel="stylesheet" href="css/index.css">
	<!--[if lt IE 9]>
	<script src="./js/html5shiv.js"></script>
	<script src="./js/respond.js"></script>
	<![endif]-->
</head>
<body>
	<!--头部导航-->
	<nav class="navbar navbar-inverse my-top-navbar navbar-fixed-top">
	<div class="container">
		<div class="row">
			<div class="navbar-header ">
				<a href="index.html" class="navbar-brand">王维军的个人网站</a>
				<button class="navbar-toggle" data-toggle="collapse" data-target="#my-con">
					<i class="icon-bar"></i>
					<i class="icon-bar"></i>
					<i class="icon-bar"></i>
				</button>
			</div>
			<div id="my-con" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li class="my-active"><a href="index.html">bootstrap</a></li>
					<li><a href="page2.html">html5+css3</a></li>
					<li><a href="page3.html">js实例</a></li>
					<li><a href="page4.html">jQuery特效</a></li>
					<li><a href="page5.html">angularJS</a></li>
					<li><a href="vue.html">vue+echarts</a></li>
					<li><a href="page6.html">PHP+mysql</a></li>
				</ul>
			</div>
		</div>
	</div>
</nav>


	<!--内容开始-->
	<div class="container">
		<div class="row">
		<!--内容1开始-->
			<!--右边-->
			<div class="col-sm-8 col-xs-12 my-main-left">
				<div class="row">
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						<!-- 轮播切换的小按钮 -->
						<ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
							<li data-target="#carousel-example-generic" data-slide-to="3"></li>
						</ol>

						<!-- 轮播的图片 -->
						<div class="carousel-inner my-carousel-parent" role="listbox">
							<div class="item active">
								<img src="img/01.jpg" class="img-thumbnail" alt="...">
								<div class="carousel-caption my-carousel-trans">
									<div class="col-xs-8 col-xs-offset-2">
										渡人如渡己，渡已，亦是渡
									</div>
								</div>
							</div>
							<div class="item">
								<img src="img/02.jpg" class="img-thumbnail" alt="">
								<div class="carousel-caption my-carousel-trans">
									<div class="col-xs-8 col-xs-offset-2">
										当我们被误解时，会花很多时间去辩白。 但没有用，没人愿意听，
										大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。
									</div>

								</div>
							</div>
							<div class="item">
								<img src="img/03.jpg" class="img-thumbnail" alt="">
								<div class="carousel-caption my-carousel-trans">
									<div class="col-xs-8 col-xs-offset-2">
										与其努力且痛苦的试图扭转别人的评判，不如默默承受，
										给大家多一点时间和空间去了解。
									</div>
								</div>
							</div>
							<div class="item">
								<img src="img/04.jpg" class="img-thumbnail" alt="">
								<div class="carousel-caption my-carousel-trans">
									<div class="col-xs-8 col-xs-offset-2">
										而我们省下辩解的功夫，去实现自身更久远的人生价值。
										其实，渡人如渡己，渡已，亦是渡人。
									</div>
								</div>
							</div>
						</div>

						<!-- 控制切换图片 -->
						<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>
				</div>
			</div>

			<!--左边-->
			<div class="col-sm-3 col-sm-offset-1 hidden-xs my-main-right">
				<div class="row">
					<div class="panel panel-primary">
						<div class="panel-heading">
							<div class="panel-title">个人简介</div>
						</div>
						<div class="panel-body bg-info">
							<ul class="my-panel-ul text-success">
								<li>姓 名：王维军</li>
								<li>性 别：男</li>
								<li>电 话：15721252192</li>
								<li>email：1745159983@qq.com</li>
							</ul>
						</div>
						<div class="panel-footer my-panel-icon text-info">
							<span class="col-xs-offset-1 fa fa-qq fa-2x"></span>
							<span class="col-xs-offset-1 fa fa-comment fa-2x"></span>
							<span class="col-xs-offset-1 fa fa-home fa-2x"></span>
						</div>
					</div>
				</div>
			</div>


		<!--内容2开始-->
			<!--左边-->
			<div class="col-sm-8 my-con-left text-warning">
				<div class="row clearfix">
					<div class="col-xs-11">
						<div class="row">
							<div class="panel">
								<div class="panel-heading">
									<div class="panel-title">第一块</div>
								</div>
								<div class="panei-body my-con-panel1 clearfix">
									<div class="col-xs-2 my-con-panel1-img"><img src="img/k01.jpg" alt=""></div>
									<div class="col-xs-10">
											@import和link的区别;<br>
											行元素和块元素;
									</div>
								</div>
								<div class="panel-footer clearfix">
									<div class="pull-left">
										<span class="fa fa-clock-o"></span>
										2017-05-13
									</div>
									<div class="pull-right">
										<span class="fa fa-thumbs-up"></span>
										点赞
										<span class="fa fa-thumbs-down"></span>
										踩
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="pull-right col-sm-1 my-circle-caret">
						<div class="my-caret"></div>
						<div class="my-circle hidden-xs"></div>
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-xs-11">
						<div class="row">
							<div class="panel">
								<div class="panel-heading">
									<div class="panel-title">第二块</div>
								</div>
								<div class="panei-body my-con-panel1 clearfix">
									<div class="col-xs-2 my-con-panel1-img"><img src="img/k01.jpg" alt=""></div>
									<div class="col-xs-10">
										currentStyle;IE里面获取内部或者外部样式表. <br>
										getComputedStyle();兼容火狐和GOOGLE; <br>
										document.documentElement.scrollTop;document.documentElement.scrollLeft;
										只兼容IE；在火狐和GOOGLE里面为0；
									</div>
								</div>
								<div class="panel-footer clearfix">
									<div class="pull-left">
										<span class="fa fa-clock-o"></span>
										2017-05-13
									</div>
									<div class="pull-right">
										<span class="fa fa-thumbs-up"></span>
										点赞
										<span class="fa fa-thumbs-down"></span>
										踩
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="pull-right col-sm-1 my-circle-caret">
						<div class="my-caret"></div>
						<div class="my-circle hidden-xs"></div>
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-xs-11">
						<div class="row">
							<div class="panel">
								<div class="panel-heading">
									<div class="panel-title">第三块</div>
								</div>
								<div class="panei-body my-con-panel1 clearfix">
									<div class="col-xs-2 my-con-panel1-img"><img src="img/k01.jpg" alt=""></div>
									<div class="col-xs-10">
										数组的属性：1. length;<br>
										数组的方法：pop(), push(), shift(), unshift(), indexOf(),
										slice(), splice(), sort(), reverse();
									</div>
								</div>
								<div class="panel-footer clearfix">
									<div class="pull-left">
										<span class="fa fa-clock-o"></span>
										2017-05-13
									</div>
									<div class="pull-right">
										<span class="fa fa-thumbs-up"></span>
										点赞
										<span class="fa fa-thumbs-down"></span>
										踩
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="pull-right col-sm-1 my-circle-caret">
						<div class="my-caret"></div>
						<div class="my-circle hidden-xs"></div>
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-xs-11">
						<div class="row">
							<div class="panel">
								<div class="panel-heading">
									<div class="panel-title">第四块</div>
								</div>
								<div class="panei-body my-con-panel1 clearfix">
									<div class="col-xs-2 my-con-panel1-img"><img src="img/k01.jpg" alt=""></div>
									<div class="col-xs-10">
										$(this).index()取得下标;
										$('li').index(document.getElementById('bar'));传递一个DOM对象，
										返回这个对象在原先集合中的索引位置 <br>
										$('li').index($('#bar'));传递一个jQuery对象 <br>
										$('li').index($('li:gt(0)')); 传递一组jQuery对象，
										返回这个对象中第一个元素在原先集合中的索引位置 <br>
										$('#bar').index('li'); 传递一个选择器，返回#bar在所有li中的做引位置 <br>
										$('#bar').index(); 不传递参数，返回这个元素在同辈中的索引位置。
									</div>
								</div>
								<div class="panel-footer clearfix">
									<div class="pull-left">
										<span class="fa fa-clock-o"></span>
										2017-05-13
									</div>
									<div class="pull-right">
										<span class="fa fa-thumbs-up"></span>
										点赞
										<span class="fa fa-thumbs-down"></span>
										踩
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="pull-right col-sm-1 my-circle-caret">
						<div class="my-caret"></div>
						<div class="my-circle hidden-xs"></div>
					</div>
				</div>
			</div>

			<!--右边-->
			<div class="my-con-right col-sm-3 col-sm-offset-1 hidden-xs">
				<div class="row">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title">
								页面跳转
							</div>
						</div>
						<div class="panel-body">
							<ol>
								<li><a href="index.html">bootstrap的页面搭建</a></li>
								<li><a href="page2.html">html5+css3新特效</a></li>
								<li><a href="page3.html">原生JS单个ul瀑布流实例</a></li>
								<li><a href="page4.html">jquery简单概括</a></li>
								<li><a href="page5.html">angularJS的小demo</a></li>
								<li><a href="page6.html">后台php+mysql学习</a></li>
							</ol>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title">
								图文并茂
							</div>
						</div>
						<div class="panel-body">
							<ul>
								<li class="row">
									<div class="col-sm-5">
										<a href="">
											<img src="img/k01.jpg" alt="">
										</a>
									</div>
									<div class="col-sm-7">
										<a href="">
											CSS可以大大提升网页开发的工作效率！
										</a>
									</div>
								</li>
								<li class="row">
									<div class="col-sm-5">
										<a href="">
											<img src="img/k02.jpg" alt="">
										</a>
									</div>
									<div class="col-sm-7">
										<a href="">
											JavaScript是Web的编程语言
										</a>
									</div>
								</li>
								<li class="row">
									<div class="col-sm-5">
										<a href="">
											<img src="img/k03.jpg" alt="">
										</a>
									</div>
									<div class="col-sm-7">
										<a href="">
											JavaScript 是 Web 的编程语言
										</a>
									</div>
								</li>
								<li class="row">
									<div class="col-sm-5">
										<a href="">
											<img src="img/k02.jpg" alt="">
										</a>
									</div>
									<div class="col-sm-7">
										<a href="">
											Bootstrap是基于HTML、CSS、JAVASCRIPT的
										</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!--尾部分页-->
	<div class="container hidden-xs">
		<div class="row">
			<!--分页-->
			<ul class="pagination pull-right">
				<li><a href="index.html">首页</a></li>
				<li><a href="#"><<</a></li>
				<li class="active"><a href="index.html">1</a></li>
				<li><a href="page2.html">2</a></li>
				<li><a href="page3.html">3</a></li>
				<li><a href="page4.html">4</a></li>
				<li><a href="page5.html">5</a></li>
				<li><a href="page6.html">6</a></li>
				<li><a href="page2.html">>></a></li>
				<li><a href="page6.html">尾页</a></li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>